<template>
  <div class="reserve">
    <div class="title">预定须知</div>
    <div class="list">
      <ul>
        <li v-for="(val, i) in reserves" :key="i" class="item">
          <div class="left">{{ val.title }}</div>
          <div class="right">{{ val.introduction }}</div>
          <span class="tip" v-if="val.tips">查看说明</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
const props = defineProps(['reserves'])
</script>
<style lang="less" scoped>
.reserve {
  padding: 15px 16px 10px;
  background-color: #fff;
  position: relative;

  .title {
    font-weight: 700;
    font-size: 20px;
    color: rgb(51, 51, 51);
    text-align: justify;
    line-height: 24px;
    overflow: hidden;
    padding: 0 0 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid #f7f9fb;
  }

  .list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .item {
      display: flex;
      margin: 10px 0 20px;
      font-size: 12px;

      .left {
        width: 64px;
      }

      .right {
        margin: 0 10px;
      }

      .tip {
        margin-left: 80px;
      }
    }
  }
}
</style>
